<template>
    <div id='chat-item-view-container' :style="getPosition()">
        <div style="display: flex;">
            <div class="chat-item-avatar" v-if="privateMsg.sender != me.id">
                <img :src="$store.getters.user(privateMsg.sender).avatar.imgUrl()">
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; margin-top: 10px;">
                <div class="chat-name" v-if="!isMe() && groupChat == true">
                    {{ sender.name }}
                </div>
                <div>
                    <div class="chat-item-content" :style="getBackground()">
                    <div class="chat-item-trangle" :style="getTrangle()"/>
                        {{ privateMsg.msg }}
                    </div>
                </div>
            </div>
            <div class="chat-item-avatar" v-if="privateMsg.sender == me.id">
                <img :src="me.avatar.imgUrl()">
            </div>
        </div>
        <div class="chat-item-time" :style="getMargin()">
            {{ privateMsg.time }}
        </div>
    </div>
</template>

<script lang='ts'>
import { ChatItemView } from "./Index";
export default ChatItemView;
</script>

<style lang='scss' scoped>
@import './Index.scss';
</style>